<template>
  <view class="content">
    <!-- #ifndef MP-TOUTIAO -->
    <singleHeader :pageTitle="getPageTitle"></singleHeader>
    <!-- #endif -->
    <template v-if="type === '0'">
      <view class="mForm">
        <view class="mFormItem">
          <view class="mFormRig">
            <view class="inp">
              <input
                v-model="name"
                type="text"
                :placeholderStyle="placeholderStyle"
                placeholder="请填写店铺名称"
              />
            </view>
          </view>
        </view>
      </view>

      <view class="des">{{ $t("user.nickTip") }}</view>
    </template>
    <view v-else class="mForm" @click="getPosition">
      <view class="mFormRig">
        <view class="inp"> {{ address ? address : "请选择地址信息" }} </view>
        <i class="iconfont icon-arrow-right"></i>
      </view>
    </view>

    <view class="submit" @click="submit">
      <view class="m-btn"> {{ $t("user.edit") }}</view>
    </view>
  </view>
</template>

<script>
import singleHeader from "@/components/diySystemPage/components/singleHeader/index.vue";
import { getStoreInfo, setStoreInfo } from "@/api/admin";

export default {
  components: {
    singleHeader
  },

  data() {
    return {
      placeholderStyle: "color:#888;",
      name: "",
      address: "",
      pageTitle: "店铺名称",
      type: "",
      coordinate: ""
    };
  },

  computed: {
    getPageTitle() {
      let str = "店铺名称";
      if (this.type === "1") {
        str = "地址信息";
      }
      return str;
    }
  },

  onLoad(opi) {
    this.$utils.hideShareMenu();
    this.type = opi.type;

    getStoreInfo().then((res) => {
      if (this.type === "0") {
        this.name = res.data.name;
      } else {
        this.coordinate = res.data.coordinate;
        this.address = res.data.address;
      }
    });
  },

  methods: {
    async getPosition() {
      const apiRes = await this.$store.dispatch("getLocation");
      if (apiRes.longitude) {
        uni.chooseLocation({
          success: ({ longitude, latitude, name }) => {
            this.address = name;
            this.coordinate = `${latitude},${longitude}`;
          },
          fail: () => {
            this.$u.toast(this.$t("my.failPosition"));
          }
        });
      }
    },

    submit() {
      let { type, name, coordinate, address } = this,
        params;

      if (type === "0") {
        if (!name) {
          this.$u.toast("店铺名称不能为空！");
          return;
        }

        params = {
          name
        };
      } else {
        if (!address) {
          this.$u.toast("店铺地址不能为空！");
          return;
        }

        params = {
          coordinate,
          address
        };
      }

      setStoreInfo(params, true).then((res) => {
        if (!res.code) {
          this.$utils.showModal("提示", "修改成功！", false, () => {
            uni.navigateBack({
              delta: 1
            });
          });
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.content {
  position: relative;
  background: #f2f2f2;
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: border-box;
}

.mFormItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 100rpx;
  border-bottom: 1px solid #f1f1f1;

  &:last-of-type {
    border-bottom: 0;
  }
}

.mFormRig {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.mForm {
  margin-bottom: 12rpx;
  padding: 0 24rpx;
  background: #fff;

  .icon-arrow-right {
    margin-left: 10rpx;
  }

  .inp {
    font-size: 28rpx;
    height: 100rpx;
    line-height: 100rpx;
    width: 100%;

    input {
      height: 100rpx;
      line-height: 100rpx;
      font-size: 32rpx;
    }
  }
}

.des {
  padding: 8rpx 24rpx 0;
  color: #8c8c8c;
  font-size: 24rpx;
}

.m-btn {
  height: 80rpx;
  background: #f0250e;
  border-radius: 32px;
  text-align: center;
  color: #fff;
  font-size: 32rpx;
  line-height: 80rpx;
}

.submit {
  padding: 80rpx 24rpx 0;
}
</style>
